<template>
    <div class="app-container">
        <!-- 编辑银行卡 -->
        <h5 class="titleInfo">编辑银行卡</h5>
        <el-form :model="form" ref="form" :rules="rules" label-width="130px" :inline="true">
            <el-row>
                <!-- {{form}} -->
                <el-col :span="24">
                    <el-form-item label="银行卡类型">
                        <span class="spanToInput">对私账户</span>
                        <!-- <el-select v-model="values" placeholder="请选择">
                            <el-option
                            key="对私账户"
                            label="对私账户">
                            </el-option>
                        </el-select> -->
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                     <!-- prop="bankAccountName" -->
                    <el-form-item label="户名">
                        <span class="spanToInput">{{form.bankAccountName}}</span>
                        <!-- <el-input readonly v-model="form.bankAccountName" placeholder="请输入姓名"></el-input> -->
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                     <!-- prop="bankAccount" -->
                    <el-form-item label="银行卡号">
                        <span class="spanToInput">{{form.bankAccount}}</span>
                        <!-- <el-input v-model="form.bankAccount" placeholder="请输入银行卡号"></el-input> -->
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                     <!-- prop="gateId" -->
                    <el-form-item label="银行名称">
                        <span class="spanToInput">{{bankNames}}</span>
                        <!-- <el-select v-model="form.gateId" filterable placeholder="请选择银行">
                            <el-option
                                :label="item.name"
                                :value="item.value"
                                v-for="(item,index) in bankNameList"
                                :key="index"
                            ></el-option>
                        </el-select> -->
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                     <!-- prop="mobileId" -->
                    <el-form-item label="手机号码">
                        <span class="spanToInput">{{form.mobileId}}</span>
                        <p class="titlep">此手机号码为法人银行卡预留手机号，请填写对应银行卡号</p>
                        <!-- <el-input readonly v-model="form.mobileId" placeholder="请输入手机号码"></el-input> -->
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="24">
                    <el-form-item label="验证码" prop="verify">
                        <el-input v-model="form.verify" placeholder="请输入验证码"></el-input>
                    </el-form-item>
                    <el-button
                        type="primary"
                        :disabled="content.indexOf('s后重新发送')>-1"
                        @click="sendmsg(form.mobileId)"
                    >{{ content }}</el-button>
                </el-col> -->
                <el-col :span="24">
                    <el-form-item label="委托书及其附件" prop="proxyFiles">
                        <attachment
                            ref="attachment"
                            :fileNum="fileNum"
                            :accept="accept"
                            :fileList="fileList"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label=" ">
                        <p class="titlep">
                            1、请先下载《委托书模板》
                            <a style="color:#409eff" href="http://mpingtest.ameimeika.com/api/downloadFile">点击下载</a>
                        </p>
                        <p class="titlep">2、委托书盖章后请上传扫描件，并上传委托书要求的其余附件，最多允许上传6个附件，支持格式：PDF、JPG、PNG</p>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label=" ">
                        <el-button @click="submitFn('form')" type="primary">确定</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import attachment from "@/components/attachment/index";
import bankCard from "@/api/bankCard";
export default {
    name: "bankCardEdit",
    components: { attachment },
    data() {
        return {
            values:"对私账户",
            content: "发送验证码",
            totalTime: 60,
            fileList: [],
            bankNameList:[],
            canClick: true, // 添加canClick
            form: {
                id:null,
                proxyFiles:[],
                gateId:null,
            },
            fileNum: 6 ,
            accept:".pdf , .jpeg , .jpg , .png",
            rules: {
                bankAccountName: [
                    { required: true, message: "请输入户名", trigger: "blur" }
                ],
                bankAccount: [
                    {
                        required: true,
                        message: "请输入银行卡号",
                        trigger: "blur"
                    }
                ],
                mobileId: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "blur"
                    }
                ],
                verify: [
                    { required: true, message: "请输入验证码", trigger: "blur" }
                ],
                proxyFiles: [
                    {
                        required: true,
                        message: "请上传委托书及其附件",
                        trigger: "blur"
                    }
                ],
                gateId: [
                    { required: true, message: "请选择银行", trigger: "blur" }
                ],
            },
            bankNames:null
        };
    },
    watch:{
        'form.gateId'(e){
            this.bankNameList.forEach(el=>{
                if(el.value == e){
                    this.bankNames = el.name
                }
            }) 
        },
    },
    inject:['reload'],
    mounted(){
        this.form.id = JSON.parse(this.$route.query.userId);
        this.getBankNameList();
    },
    methods: {
        //获取银行卡下拉
        getBankNameList() {
            bankCard
                .bankDropdownList({})
                .then(res => {
                    if (!res.data.code) {
                        res.data.data.forEach(e => {
                            this.bankNameList.push({
                                value: e.gateId,
                                name: e.bankName
                            });
                        });
                        this.getInfo(this.form)
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        // 发送短信
        sendmsg(phone) {
            // console.log("phone", phone);
            bankCard
                .sendmsg({
                    phone,
                    type:"1103",
                    extra:""
                })
                .then(res => {
                    if (res.data.code == 0) {
                        if (!this.canClick) return;
                        this.canClick = false;
                        this.content = this.totalTime + "s后重新发送";
                        const clock = window.setInterval(() => {
                            this.totalTime--;
                            this.content = this.totalTime + "s后重新发送";
                            if (this.totalTime < 0) {
                                window.clearInterval(clock);
                                this.content = "重新发送验证码";
                                this.totalTime = 60;
                                this.canClick = true; // 这里重新开启
                            }
                        }, 1000);
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        //获取详情
        getInfo(e){
            bankCard
                .updateDetail(e)
                .then(res => {
                    // console.log(res)
                    if (!res.data.code) {
                        this.form = res.data.data
                        this.$nextTick(()=>{
                            if(this.form.proxyFiles){
                                if(this.form.proxyFiles.length>0){
                                    this.form.proxyFiles.forEach((e, index) => {
                                        this.fileList.push({
                                            url:
                                            sessionStorage.getItem("imgUrlPrefix") + e,
                                            name:e
                                        });
                                    });
                                }
                            }else{
                                this.form.proxyFiles = []
                            }
                        })
                        // this.form.gateId = "ABC"
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        // 编辑
        editFn() {
            let datas = { ...this.form };
            // console.log(datas)
            bankCard
                .updateBankCard(datas)
                .then(res => {
                    if (!res.data.code) {
                        this.succStatus("编辑成功");
                        this.$router.push("/bankCardIndex");
                        this.reload();
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        // 提交
        submitFn(e) {
            this.form["proxyFiles"] = this.$refs.attachment.submitUpload();
            this.$refs[e].validate(valid => {
                if (valid) {
                    this.editFn();
                } else {
                    this.$message({
                        message: "有必填项没填，不能提交咯",
                        type: "warning"
                    });
                }
            });
        },
        //成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scoped>
.app-container {
    padding: 0.1px !important;
}
.titlep {
    font-size: 12px;
    color: #606266;
    margin-bottom: 0
}
</style>